<template>
	<view class="add-schedule" v-if="scheduleAuthority">
		<!-- <u-button type="success" size="normal" @click="importFile">导入</u-button> -->
		<u-icon name="plus-circle" @click="toAdd"></u-icon>
	</view>
	<view class="schedule-list" v-if="list.length">
		<view class="list-item" v-for="item in list">
				<view class="content">
					<view class="inner-item">
						<view class="label">
							日期：
						</view>
						<view class="value">
							{{item.workDate}}
						</view>

					</view>
					<view class="inner-item">
						<view class="label">
							班次：
						</view>
						<view class="value">
							{{item.shiftName}}
						</view>
					</view>
					<view class="inner-item">
						<view class="label">
							时间：
						</view>
						<view class="value">
							{{item.startTime+" - "+item.endTime}}
						</view>
					</view>
				<!-- 	<view class="inner-item">
						<view class="label">
							结束时间：
						</view>
						<view class="value">
							12:20
						</view>
					</view -->
				</view>
				<view class="delete">
					<u-button v-if="scheduleAuthority"  size="mini" type="warning" @click="delSchedule(item)">删 除</u-button>
				</view>
		</view>
<!-- 		<view class="theader">
			<view>
				日期
			</view>
			<view>
				班次
			</view>
			<view >
				开始时间
			</view>
			<view>
				结束时间
			</view>
		</view>
		<view class="tbody" v-if="list.length">
			<view class="row" v-for="item in list">
				<view class="left">
					{{item.workDate}}
				</view>
				<view class="right" >
					<view v-for="item2 in item.list">
						<view>
							{{item2.shiftName}}
						</view>
						<view>
							{{item2.startTime}}
						</view>
						<view>
							{{item2.endTime}}
						</view>
					</view>
				</view>
			</view>

		</view> -->
	</view>
	<view  v-else style="padding-top: 300rpx;">
		<u-empty text="暂无数据" mode="list"></u-empty>
	</view>
</template>

<script setup>
	import {ref,reactive} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import userSotre from '@/store/user';
	import waitersApi from "@/api/waiters"
	const userPinia = userSotre()
	const scheduleAuthority = userPinia.userinfo.scheduleAuthority
	const list = ref([])
	async function getData(){
		const res = await waitersApi.getScheduleInfo()
		res.data.forEach(item=>{
			console.log(item)
			item.workDate = item.workDate.split(" ")[0]
			item.list.forEach(item2=>{
				item2.startTime = item2.startTime.split(" ")[1].split(":").slice(0,2).join(":")
				item2.endTime = item2.endTime.split(" ")[1].split(":").slice(0,2).join(":")

			})
		})
		list.value = res.data.flatMap(item=>item.list.map(item2=>({...item,...item2})))
		console.log(list)

	}
	function importFile(){
		// wx.chooseMessageFile
		wx.chooseMessageFile({
		  count: 1, //默认100
		  extension:['.xls','.xlsx'],
			success: function (res) {
				console.log(res.tempFilePaths);
			}
		})
	}

	function toAdd(){
		uni.navigateTo({
			url:"./add"
		})
	}
	async function delSchedule(item){
		const {confirm} = await uni.showModal({
			content:"确定删除该班次？"
		})
		if(!confirm) return
		await waitersApi.delSchedule({id:item.shiftId})
		wx.showToast({
			icon:"success",
			title:"删除成功"
		})
		getData()
	}
	onLoad(()=>{
		uni.$on("getWaiterSchedule",getData)
		getData()
	})
</script>

<style lang="scss">
	.add-schedule{
		position: sticky;
		top: 0;
		background-color: white;
		font-size: 29rpx;
		color: black;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		:deep(.u-btn){
			width: 140rpx;
			height: 56rpx;
			margin-right: 0;

		}
		:deep(.u-icon__icon){
			font-size: 58rpx !important;
			color:$theme-bg-color;
		}
	}
	.schedule-list{
		padding-top: 20rpx;
		.list-item{
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: white;
			padding: 20rpx;
			margin:0 30rpx 20rpx;
			display: flex;
			.content{
				flex: 1;
				.inner-item{
					display: flex;
					line-height: 50rpx;
					.value{
						color: gray;
					}
				}

			}
			.delete{
				display: flex;
				align-items: flex-end;
				color: gray;
			}
		}
	}
	.table-wrapper{
		// padding:;
		text-align: center;
		.theader{
			position: sticky;
			top: 0;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			&>view{
				width: 25%;
				background-color: #ffc300;
				font-size: 30rpx;
				font-weight: bolder;
				color:white;
				padding: 20rpx 0;
			}
		}
		.tbody{
			padding-bottom: 100rpx;
			.row{
				display: flex;
				align-items: center;
				padding-bottom: 4rpx;
				border-bottom: 1rpx solid #e6e6e6;
				.left{
					width: 25%;
				}
				.right{
					flex: 1;
					&>view{
						display: flex;
						&>view{
							padding: 10rpx 0;
							width: 33%;
						}
					}


				}
			}
		}
	}

</style>
